<template>
	<view>
		<template v-for="item of formConfig.configForm" :key="item.id">
			<view class="gui-h5 gui-margin-top gui-color-gray" v-if="item.class == '0'">
				{{ item.title }}
			</view>

			<view class="gui-form-item" :class="formConfig.baseStyle.inputStyle" v-else-if="item.class == '1'">
				<template v-if="formConfig.baseStyle.hasIcon">
					<gui-image :src="item.iconImage" :width="formConfig.baseStyle.iconWith" :height="formConfig.baseStyle.iconHight"></gui-image>
				</template>
				<text class="gui-form-label gui-secondary-text myTextClass">{{ item.fieldLabel }}</text>
				<view class="gui-form-body">
					<input
						:type="item.type"
						class="gui-form-input"
						:disabled="item.isDisable"
						:class="formConfig.baseStyle.inputAlign"
						v-model="formData[item.field]"
						:placeholder="item.placeHold"
					/>
				</view>
			</view>

			<view class="gui-form-item" :class="formConfig.baseStyle.inputStyle" v-else-if="item.class == '2'">
				<template v-if="formConfig.baseStyle.hasIcon">
					<gui-image :src="item.iconImage" :width="formConfig.baseStyle.iconWith" :height="formConfig.baseStyle.iconHight"></gui-image>
				</template>
				<text class="gui-form-label gui-secondary-text myTextClass">{{ item.fieldLabel }}</text>
				<view class="gui-form-body">
					<picker mode="selector" :range="item.pickerList" @change="pickerChange" :data-field="item.field" :data-list="item.pickerList">
						<view class="gui-flex gui-row gui-nowrap gui-justify-content-end gui-align-items-center">
							<text class="gui-text gui-secondary-text">{{ formData[item.field] }}</text>
							<text class="gui-icons gui-text-center gui-color-gray">&#xe601;</text>
						</view>
					</picker>
				</view>
			</view>

			<view class="gui-form-item" :class="formConfig.baseStyle.inputStyle" v-else-if="item.class == '7'">
				<template v-if="formConfig.baseStyle.hasIcon">
					<gui-image :src="item.iconImage" :width="formConfig.baseStyle.iconWith" :height="formConfig.baseStyle.iconHight"></gui-image>
				</template>
				<text class="gui-form-label gui-secondary-text myTextClass">{{ item.fieldLabel }}</text>
				<view class="gui-form-body">
					<view class="gui-flex gui-justify-content-end">
						<radio-group @change="(e) => radioChange(e, item.field)">
							<label v-for="child of item.pickerList" :key="child.id" style="margin-right: 6rpx">
								<radio :value="child.value" :disabled="item.isDisable" :checked="formData[item.field] == child.value" :color="child.color" style="transform: scale(0.7)" />
								<text class="gui-text">{{ child.name }}</text>
							</label>
						</radio-group>
					</view>
				</view>
			</view>

			<view class="gui-form-item" :class="formConfig.baseStyle.inputStyle" v-else-if="item.class == '3'">
				<template v-if="formConfig.baseStyle.hasIcon">
					<gui-image :src="item.iconImage" :width="formConfig.baseStyle.iconWith" :height="formConfig.baseStyle.iconHight"></gui-image>
				</template>
				<text class="gui-form-label gui-secondary-text myTextClass">{{ item.fieldLabel }}</text>
				<view class="gui-form-body" @click="selectDistrict(item.field)">
					<view class="gui-flex gui-row gui-align-items-center gui-justify-content-end">
						<text class="gui-text gui-secondary-text">{{ formData[item.field] }}</text>
						<text class="gui-icons gui-text-center gui-color-gray">&#xe601;</text>
					</view>
				</view>
			</view>

			<view class="gui-form-item" :class="formConfig.baseStyle.inputStyle" v-else-if="item.class == '4'">
				<template v-if="formConfig.baseStyle.hasIcon">
					<gui-image :src="item.iconImage" :width="formConfig.baseStyle.iconWith" :height="formConfig.baseStyle.iconHight"></gui-image>
				</template>
				<text class="gui-form-label gui-secondary-text myTextClass">{{ item.fieldLabel }}</text>
				<view class="gui-form-body" style="display: flex; justify-content: flex-end">
					<gui-datetime @confirm="(e) => changeTime(e, item.field)" :value="formData[item.field]">
						<text class="demo gui-border-radius-large gui-bg-primary gui-icons gui-color-white">&#xe6d1; {{ formData[item.field] }}</text>
					</gui-datetime>
				</view>
			</view>

			<view class="gui-form-item" :class="formConfig.baseStyle.inputStyle" v-else-if="item.class == '5'">
				<template v-if="formConfig.baseStyle.hasIcon">
					<gui-image :src="item.iconImage" :width="formConfig.baseStyle.iconWith" :height="formConfig.baseStyle.iconHight"></gui-image>
				</template>
				<template v-if="item.fieldLabel != ''">
					<text class="gui-form-label gui-secondary-text myTextClass">{{ item.fieldLabel }}</text>
				</template>
				<view :class="item.fieldLabel != '' ? 'gui-form-body' : ''">
					<view class="gui-dark-bg-level-3 gui-padding">
						<template v-if="item.isDisable">
							<gui-choose-images
								@change="(e) => changeImageAmbient(e, item.field)"
								btnName=""
								imgMode="aspectFill"
								:items="formData[item.field]"
								:maxFileNumber="formData[item.field].length"
								removeBtnColor="rgba(0,0,0,0)"
							></gui-choose-images>
						</template>
						<template v-else>
							<gui-choose-images
								@removeImg="(e) => removeImg(e, item.field)"
								:maxFileNumber="item.maxFileNumber"
								@change="(e) => changeImageAmbient(e, item.field)"
								btnName=""
								imgMode="aspectFill"
								:items="formData[item.field]"
							></gui-choose-images>
						</template>
					</view>
				</view>
			</view>

			<view class="gui-form-item" :class="formConfig.baseStyle.inputStyle" v-else-if="item.class == '6'">
				<template v-if="formConfig.baseStyle.hasIcon">
					<gui-image :src="item.iconImage" :width="formConfig.baseStyle.iconWith" :height="formConfig.baseStyle.iconHight"></gui-image>
				</template>
				<text class="gui-form-label gui-secondary-text myTextClass">{{ item.fieldLabel }}</text>
				<view class="gui-form-body">
					<view class="gui-padding">
						<gui-stags :tags="item.pickerList" @change="(e) => selectTags(e, item.pickerList, item.field)" type="checkbox"></gui-stags>
					</view>
				</view>
			</view>

			<view class="" :class="formConfig.baseStyle.inputStyle" v-else-if="item.class == '8'">
				<view class="gui-flex gui-align-items-center">
					<template v-if="formConfig.baseStyle.hasIcon">
						<gui-image :src="item.iconImage" :width="formConfig.baseStyle.iconWith" :height="formConfig.baseStyle.iconHight"></gui-image>
					</template>
					<text class="gui-form-label gui-secondary-text myTextClass">{{ item.fieldLabel }}</text>
				</view>
				<view style="padding-bottom: 15rpx;">
					<view class="gui-bg-gray" style="padding: 14rpx">
						<textarea v-model="formData[item.field]" :placeholder="item.placeHold" class="gui-textarea gui-bg-gray" style="width: 100%;"></textarea>
					</view>
				</view>
			</view>
		</template>

		<view class="" style="margin-top: 60rpx" v-if="formConfig.baseStyle.hasBtn">
			<button @click="releaseBtn" type="default" class="gui-button gui-bg-primary gui-noborder gui-border-radius-large">
				<text class="gui-color-white gui-button-text">提交</text>
			</button>
		</view>
		<gui-area-picker :value="dataRec.areaPickerValue" ref="guiareapicker" @confirm="confirmArea" :level="3"></gui-area-picker>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import uploadHandle from '@utils/upLoadFile.js';

const props = defineProps({
	formConfig: { type: Object },
	formData: { type: Object }
});
const emits = defineEmits(['submit']);
let dataRec = reactive({
	areaPickerValue: [],
	currentAreaFieldKey: '' // 临时存储
});

// 地区相关
let guiareapicker = ref();
let selectDistrict = (e) => {
	dataRec.currentAreaFieldKey = e;
	guiareapicker.value.open();
};
let confirmArea = (e) => {
	dataRec.areaPickerValue = e.names;
	props.formData[dataRec.currentAreaFieldKey] = e.names.join();
};

// pick相关
let pickerChange = (e) => {
	let { field, list } = e.currentTarget.dataset;
	let idx = Number(e.detail.value);
	props.formData[field] = list[idx];
};

// 时间相关
let changeTime = (e, field) => {
	props.formData[field] = `${e[0]}-${e[1]}-${e[2]} ${e[3]}:${e[4]}:${e[5]}`;
};

// 图片相关
let changeImageAmbient = async (e, field) => {
	if (e.length != 0) {
		let res = await uploadHandle(1, e);
		props.formData[field].push(res.data.fullurl);
	}
};
let removeImg = (e, field) => {
	let removeUrl = e.url;
	let index = props.formData[field].findIndex((item) => item == removeUrl);
	props.formData[field].splice(index, 1);
};

// 标签相关
let selectTags = (e, list, field) => {
	if (e.length) {
		let tmpTag = [];
		e.map((item) => {
			tmpTag.push(list[item].text);
		});
		props.formData[field] = tmpTag;
	} else {
		props.formData[field] = [];
	}
};
// 单选相关
let radioChange = (e, field) => {
	props.formData[field] = e.detail.value;
};

// 提交
let releaseBtn = () => {
	// 做一次非空判断
	let flag = true;
	props.formConfig.configForm.map((item) => {
		if (item.hasOwnProperty('required') && item.required) {
			// 区分数据类型
			if (item.valueType == String) {
				if (props.formData[item.field] == '') {
					flag = false;
				}
			} else if (item.valueType == Array) {
				if (props.formData[item.field].length == 0) {
					flag = false;
				}
			}
		}
	});
	if (flag) {
		emits('submit');
	} else {
		uni.showToast({
			title: '请填写完整',
			icon: 'none'
		});
	}
};
</script>

<style lang="scss" scoped>
.myTextClass {
	margin-left: 10rpx;
}
.algin-right {
	text-align: right;
}
.gui-form-icon {
	line-height: 2rem;
}
::v-deep .demo {
	padding: 0 10rpx;
}
</style>
